<template>
  <div class="address">
    <div class="name flex-a"><span>{{ addrInfo[0] ? addrInfo[0].userName : '' }}</span><span>{{
      addrInfo[0] ? addrInfo[0].userPhone : '' }}</span></div>
    <div class="addr">{{ addrInfo[0] ? addrInfo[0].provinceName + addrInfo[0].cityName + addrInfo[0].regionName +
      addrInfo[0].detailAddress : '' }}</div>
    <div class="title">商品清单</div>
  </div>
</template>
  
<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted } from 'vue';
import { getAddressList } from '../../../../api/index'
export default {
  components: {

  },
  setup() {
    const state = reactive({
      id: '',
      addrInfo: []
    });
    onMounted(() => {
      const router = useRouter();
      if (router.params.addressId) {
        state.id = router.params.addressId
        getAddressList().then(response => {
          if (response.resultCode == 200) {
            let list = response.data
            state.addrInfo = list.filter(item => item.addressId == router.params.addressId)
          }
        })
      }
    });
    return { ...toRefs(state) };
  }
};
</script>
<style lang="scss" >
.address {
  div {
    padding: 0 30rpx;
  }

  .name {
    padding: 20rpx 30rpx;

    span:first-child {
      color: #212121;
      font-size: 30rpx;
      margin-right: 10rpx;
    }

    span:last-child {
      color: #808080;
      font-size: 30rpx;
    }
  }

  .addr {
    border-bottom: 1rpx solid #F2F2F2;
    font-size: 30rpx;
    padding-bottom: 20rpx;
  }

  .title {
    padding: 20rpx 30rpx;
    font-size: 30rpx;
  }
}
</style>